<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Button } from 'vant';

const version = ref(browser.runtime.getManifest().version);
const autoUpdate = ref<boolean>(true);
const updateInterval = ref<number>(24); // 默认24小时检查一次

// 从storage加载设置
browser.storage.sync.get(['autoUpdate', 'updateInterval']).then((result: {
  autoUpdate?: boolean;
  updateInterval?: number;
}) => {
  if (result.autoUpdate !== undefined) autoUpdate.value = result.autoUpdate;
  if (result.updateInterval !== undefined) updateInterval.value = result.updateInterval;
});

// 保存设置到storage
function saveSettings() {
  browser.storage.sync.set({
    autoUpdate: autoUpdate.value,
    updateInterval: updateInterval.value
  });
}

// 自动更新检查逻辑
watch([autoUpdate, updateInterval], ([newAutoUpdate, newInterval]) => {
  if (!newAutoUpdate) return;
  
  const intervalId = setInterval(() => {
    browser.runtime.requestUpdateCheck().then(([status]) => {
      if (status === 'update_available') {
        console.log('Update available');
      }
    });
  }, newInterval * 60 * 60 * 1000);

  return () => clearInterval(intervalId);
});
</script>

<template>
  <div class="options-container">
    <h1>扩展设置</h1>
    <div class="settings">
      <div class="version">当前版本: {{ version }}</div>
      <div class="update-setting">
        <label>
          <input type="checkbox" v-model="autoUpdate" @change="saveSettings">
          自动更新
        </label>
        <div>
          检查间隔: 
          <input type="number" v-model="updateInterval" min="1" max="168" @change="saveSettings"> 小时
        </div>
      </div>
      <Button type="primary" @click="saveSettings">保存设置</Button>
    </div>
  </div>
</template>

<style scoped>
.options-container {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.settings {
  margin-top: 20px;
}

.update-setting, .chatbot-setting {
  margin: 20px 0;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
}

.chatbot-setting input[type="url"] {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-top: 8px;
}

.version {
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
}

input[type="number"] {
  width: 60px;
  margin: 0 8px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
</style>
